import MathJax from './MathJax.js'

function getOption(graphInfo){
//给节点设置样式
    let nodes=graphInfo['nodes'];
    let links=graphInfo['links'];
    let title=graphInfo['title'];
    //console.log(links);
//设置option样式
    return {
        title: {
            text: title,
            left: 'center',
            textStyle:{
                fontSize:20
            },
            bottom:20
        },
        tooltip: {
            trigger: 'item'
        },
        autoCurveness:true,
        backgroundColor:'white',
        roam: true,
        series: [
            {
                type: 'graph',
                layout: 'force',
                force:{
                    repulsion : 200, edgeLength:[50,100]
                },
                ribbonType: false,
                symbol: "circle",
                edgeSymbol:['none', 'arrow'],
                symbolSize: 27,
                edgeSymbolSize: 10,
                nodes: nodes,
                links: links,
                label: {
                    normal: {
                        show: true
                    }
                },
                draggable:true
            }
        ]
    };
}
function nodeStyle(title){
   return  { 
       name: title,
       itemStyle: {borderColor: 'black',color:'white',borderWidth: 3},
       label:{
           show:true,
           position:'inside',
           fontSize:15,
           color:'black',
           fontWeight:'bold'
        }
    }
}
function edgeStyle(selectNode){
    return {
        source: selectNode[0],
        target: selectNode[1],
        value:100,
        lineStyle: {
            width: 5,
            color: '#000',
            type:'solid',
            opacity:0.8,
            ignoreForceLayout:true
        }
    };
}
function initData(){
    nodes=[],links=[],option={},matrix=[],title=""; 
    Bnodes=[],Bmatrix=[],Blinks=[],Boption={};
}
function getIndex(letter){
     //获取下标

}
let myChart,myChart1;
let nodes=[],links=[],option={},Bnodes=[],Blinks=[],Boption={},title="",Btitle="";  //显示图的点集和边集
let matrix=[],Bmatrix=[];//关系矩阵
var app=new Vue({
    el:"#app",
    data:{
        sets:"{1,2,3,4}",
        relations:"{(1,1),(1,2),(1,4),(2,1),(3,2),(3,4)}",
        matrixs:'',
        Bmatrixs:'',
        isShowMatrix:false,
        isMatrix:false,
        isBMatrix:false,
        result1:"",
        result2:"",
        result3:"",
        result4:"",
        result5:"",
        closureSelect:"闭包选择",
        knowLegde:"",
        close:''
    },
    methods: {
        relationShow(){
            initData();
            //字符串处理
            //console.log(this.sets+this.relations);
            let sets=[],relations=[];
            //检查格式是否正确
            try{
                var reg = RegExp(/^{[a-zA-Z0-9]+(,([a-zA-Z0-9]+))*}$/);
                if(!this.sets.match(reg)){
                    modalApp.modalAlert("集合格式输入不正确");return;
                }
                var reg1=RegExp(/^{\([a-zA-Z0-9]+,[a-zA-Z0-9]+\)(,\([a-zA-Z0-9]+,[a-zA-Z0-9]+\))*}$/);
                if(!this.relations.match(reg1)){
                    modalApp.modalAlert("关系格式输入不正确");return;
                }
                sets=this.sets.slice(1,this.sets.length-1).split(',');
                console.log(sets);
                let rel=this.relations.slice(1,this.relations.length-1).split(',');
                for(let i=0;i<rel.length;i=i+2){
                    relations.push({
                        a1:rel[i].slice(1),
                        a2:rel[i+1].slice(0,rel[i+1].length-1),
                    });
                }
                console.log(relations);
                //如果关系中的点在集合中不存在则 报错
                for(let i=0;i<sets.length;i++){
                    nodes.push(nodeStyle(sets[i]));
                    matrix[i]=[];
                    for(let j=0;j<sets.length;j++){
                        matrix[i][j]=0;
                    }
                }
                for(let i=0;i<relations.length;i++){
                    let t1=sets.indexOf(relations[i].a1);
                    let t2=sets.indexOf(relations[i].a2);
                    if(t1!=-1&&t2!=-1){
                        if(t1==t2){
                            nodes[t1].itemStyle.color='black';
                            nodes[t1].label.color='white';
                        }
                        matrix[t1][t2]=1;
                        links.push(edgeStyle([t1,t2]));
                    }
                    else{
                        modalApp.modalAlert("关系中的点在集合中不存在");return;
                    }
                }
                if(this.closureSelect=="闭包选择"){
                    modalApp.modalAlert("未选择闭包类型,请选择");return;
                }
                title="二元关系图形(有向图)表示"
                console.log(nodes);
                console.log(links);
                let jsonData={"nodes":nodes,"links":links,"title":title}
                option=getOption(jsonData);
                this.isShowMatrix=true;
                if(this.isMatrix){
                this.$nextTick(function () {
                    myChart = echarts.init(document.getElementById('echartsDiv'));
                    myChart.setOption(option);
                }) 
                }
                else{
                    let matrixs="$$\\begin{bmatrix}"
                    for(let i=0;i<matrix.length;i++){
                        for(let j=0;j<matrix[i].length;j++){
                            if(j!=(matrix[i].length-1)) matrixs+=" "+matrix[i][j]+" &";
                            else matrixs+=" "+matrix[i][j]+" \\\\";
                        }
                    }
                    matrixs+="\\end{bmatrix}$$";
                    document.getElementById("matrix").innerHTML= "";
                    this.matrixs=matrixs;
                    document.getElementById("matrix").innerHTML= matrixs;
                    //this.formatMath();
                    console.log(matrixs);
                }
                if(this.closureSelect=="自反闭包"){
                    this.closurse1();return;
                }
                if(this.closureSelect=="对称闭包"){
                    this.closurse2();return;
                }
                if(this.closureSelect="传递闭包"){
                    this.closurse3();return;
                }
            }catch(e){
                console.log(e);
                return;
        }
        },
        formatMath() {
            let that = this;
            console.log(MathJax);
            that.$nextTick(function () {
                if(MathJax.isMathjaxConfig){//判断是否初始配置，若无则配置。
                    MathJax.initMathjaxConfig();
                }
                MathJax.MathQueue("matrix");//传入组件id，让组件被MathJax渲染
            })
        },
        BformatMath() {
            let that = this;
            console.log(MathJax);
            that.$nextTick(function () {
                if(MathJax.isMathjaxConfig){//判断是否初始配置，若无则配置。
                    MathJax.initMathjaxConfig();
                }
                MathJax.MathQueue("app");//传入组件id，让组件被MathJax渲染
            })
        },
        switchMatrix(){
            this.isShowMatrix=true;
            console.log(this.isMatrix);
            this.isMatrix=!this.isMatrix;
            if(this.isMatrix){
                this.$nextTick(function () {
                    myChart = echarts.init(document.getElementById('echartsDiv'));
                    myChart.setOption(option);
                }) 
            }
            else{
                let matrixs="$$\\begin{bmatrix}"
                for(let i=0;i<matrix.length;i++){
                    for(let j=0;j<matrix[i].length;j++){
                        if(j!=(matrix[i].length-1)) matrixs+=" "+matrix[i][j]+" &";
                        else matrixs+=" "+matrix[i][j]+" \\\\";
                    }
                }
                matrixs+="\\end{bmatrix}$$";
                document.getElementById("matrix").innerHTML= "";
                this.matrixs=matrixs;
                document.getElementById("matrix").innerHTML= matrixs;
                this.formatMath();
                console.log(matrixs);
            }
        },
        switchBMatrix(){
            this.isShowMatrix=true;
            this.isBMatrix=!this.isBMatrix;
            if(this.closureSelect=="自反闭包"){
                this.closurse1();return;
            }
            if(this.closureSelect=="对称闭包"){
                this.closurse2();return;
            }
            if(this.closureSelect="传递闭包"){
                this.closurse3();return;
            }
        },
        selectMenu(str){
            this.closureSelect=str;
            this.close=str+" "
        },
        closurse1(){
            Bnodes=[],Bmatrix=[],Blinks=[],Boption={};
            this.knowLegde="每个顶点如果没有自环则增加自环\nr(R) 的自反闭包是： R∪IA";
            //自反闭包 r(R) 的自反闭包是： R∪Ia
            let len=nodes.length;
            let sets=this.sets.slice(1,this.sets.length-1).split(',');
            console.log(sets);
            for(let i=0;i<len;i++){
                Bmatrix[i]=[];
                Bnodes.push(nodeStyle(sets[i]));
                Bnodes[i].itemStyle.color='black';
                Bnodes[i].label.color='white';
                for(let j=0;j<len;j++){
                    if(i==j){
                        Bmatrix[i][j]=1;
                        Blinks.push(edgeStyle([i,j]));
                        continue;
                    }
                    if(matrix[i][j]==1) {
                        Blinks.push(edgeStyle([i,j]));
                        Bmatrix[i][j]=1;
                    }
                    else Bmatrix[i][j]=0;
                }
            }
            Btitle="自反闭包关系图"
            let jsonData={"nodes":Bnodes,"links":Blinks,"title":Btitle}
            Boption=getOption(jsonData);
            if(this.isBMatrix){
                this.$nextTick(function () {
                    myChart1 = echarts.init(document.getElementById('echartsBDiv'));
                    myChart1.setOption(Boption);
                })
            }
            else{
                let Bmatrixs="$$\\begin{bmatrix}"
                for(let i=0;i<Bmatrix.length;i++){
                        for(let j=0;j<Bmatrix[i].length;j++){
                            if(j!=(Bmatrix[i].length-1)) Bmatrixs+=" "+Bmatrix[i][j]+" &";
                            else Bmatrixs+=" "+Bmatrix[i][j]+" \\\\";
                        }
                }
                Bmatrixs+="\\end{bmatrix}$$";
                document.getElementById("Bmatrix").innerHTML= "";
                this.Bmatrixs=Bmatrixs;
                document.getElementById("Bmatrix").innerHTML= Bmatrixs;
                this.BformatMath();
                console.log(Bmatrixs);
            }
        },
        closurse2(){
            //对称闭包
            Bnodes=[],Bmatrix=[],Blinks=[],Boption={};
            this.knowLegde="如果有顶点i到顶点j的有向边且 i≠j ，则添加（如果该图中不存在）有向边 ( j, i )。或者保留该关系的有向图中的顶点，且将所有有向边改作无向边";
            let len=nodes.length;
            let sets=this.sets.slice(1,this.sets.length-1).split(',');
            console.log(sets);
            for(let i=0;i<len;i++){
                Bmatrix[i]=[];
                Bnodes.push(nodeStyle(sets[i]));
            }
            for(let i=0;i<len;i++){
                for(let j=i;j<len;j++){
                    if((matrix[i][j]==1&&matrix[j][i]==0)||(matrix[i][j]==0&&matrix[j][i]==1)) {
                        Blinks.push(edgeStyle([i,j]));
                        Blinks.push(edgeStyle([j,i]));
                        Bmatrix[i][j]=1;Bmatrix[j][i]=1;
                        continue;
                    }
                    if(matrix[i][j]==1&&matrix[j][i]==1&&i!=j){
                        Blinks.push(edgeStyle([i,j]));
                        Blinks.push(edgeStyle([j,i]));
                        Bmatrix[i][j]=1;Bmatrix[j][i]=1;
                        continue;
                    }
                    if(i==j&&matrix[i][j]==1){
                        Blinks.push(edgeStyle([i,j]));
                        Bnodes[i].itemStyle.color='black';
                        Bnodes[i].label.color='white';
                        Bmatrix[i][j]=1;
                        continue;
                    }
                    if(i==j&&matrix[i][j]==0){
                        Bmatrix[i][j]=0;
                        continue;
                    }
                    Bmatrix[i][j]=0;
                    Bmatrix[j][i]=0;
                }
            }
            Btitle="对称闭包关系图"
            let jsonData={"nodes":Bnodes,"links":Blinks,"title":Btitle}
            Boption=getOption(jsonData);
            if(this.isBMatrix){
                this.$nextTick(function () {
                    myChart1 = echarts.init(document.getElementById('echartsBDiv'));
                    myChart1.setOption(Boption);
                })
            }
            else{
                let Bmatrixs="$$\\begin{bmatrix}"
                for(let i=0;i<Bmatrix.length;i++){
                        for(let j=0;j<Bmatrix[i].length;j++){
                            if(j!=(Bmatrix[i].length-1)) Bmatrixs+=" "+Bmatrix[i][j]+" &";
                            else Bmatrixs+=" "+Bmatrix[i][j]+" \\\\";
                        }
                }
                Bmatrixs+="\\end{bmatrix}$$";
                document.getElementById("Bmatrix").innerHTML= "";
                this.Bmatrixs=Bmatrixs;
                document.getElementById("Bmatrix").innerHTML= Bmatrixs;
                this.BformatMath();
                console.log(Bmatrixs);
            }
        },
        closurse3(){
            //传递闭包
            Bnodes=[],Bmatrix=[],Blinks=[],Boption={};
            this.knowLegde="不断更新有向图：如果存在顶点 i 到 j 的道路，则将边 ( i,  j ) 添加到有向图中（如果该图中不存在），直至没有新的有向边可添加为止";
            let len=nodes.length;
            let sets=this.sets.slice(1,this.sets.length-1).split(',');
            // console.log(sets);
            // console.log(matrix);
            for(let i=0;i<len;i++){
                Bmatrix[i]=[];
                [...Bmatrix[i]]=matrix[i];
                Bnodes.push(nodeStyle(sets[i]));
                if(Bmatrix[i][i]==1){
                    Bnodes[i].itemStyle.color='black';
                    Bnodes[i].label.color='white';
                }  
            }
            Bmatrix[0][0]=5;
            console.log(matrix);
           let n=len;
            for (let k = 0; k < n; ++k)
                for (let i = 0; i < n; ++i)
                    for (let j = 0; j < n; ++j)
                        if (Bmatrix[i][k]&& Bmatrix[k][j])
                            Bmatrix[i][j] = 1;
                            
            for(let i=0;i<n;i++){
                for(let j=0;j<n;j++){
                    if(Bmatrix[i][j] ==1)
                    Blinks.push(edgeStyle([i,j]));
                }
            }


            Btitle="传递闭包关系图"
            let jsonData={"nodes":Bnodes,"links":Blinks,"title":Btitle}
            Boption=getOption(jsonData);
            if(this.isBMatrix){
                this.$nextTick(function () {
                    myChart1 = echarts.init(document.getElementById('echartsBDiv'));
                    myChart1.setOption(Boption);
                })
            }
            else{
                let Bmatrixs="$$\\begin{bmatrix}"
                for(let i=0;i<Bmatrix.length;i++){
                        for(let j=0;j<Bmatrix[i].length;j++){
                            if(j!=(Bmatrix[i].length-1)) Bmatrixs+=" "+Bmatrix[i][j]+" &";
                            else Bmatrixs+=" "+Bmatrix[i][j]+" \\\\";
                        }
                }
                Bmatrixs+="\\end{bmatrix}$$";
                document.getElementById("Bmatrix").innerHTML= "";
                this.Bmatrixs=Bmatrixs;
                document.getElementById("Bmatrix").innerHTML= Bmatrixs;
                this.BformatMath();
                console.log(Bmatrixs);
            }
        },
    }
})
var modalApp=new Vue({
    el:"#myModal1",
    data:{
        message:""
    },
    methods:{
        modalAlert(str){
            this.message=str;
            $('#myModal1').modal('toggle');
        }
    }
})
